import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';

/// 2022年更新  适配 flutter 3.0
/// IntrinsicHeight 的应用
/// Flutter 巧妙的实现一个时间轴效果 IntrinsicHeight 组件的应用
class InstrinsicPage02 extends StatelessWidget {
  List<String> _list = [
    "早起的年轻人 爱早起",
    "早起的年轻人 爱早起早起的年轻人早起的年轻人早起的年轻人早起的年轻人早起的年轻人",
    "早起的年轻人 爱早起早起的年轻人早起的年轻人早起的年轻人早起的年轻人早起的年轻人早起的年轻人早起的年轻人早起的年轻人早起的年轻人早起的年轻人早起的年轻人",
    "早起的年轻人 爱早起早起的年轻人早起的年轻人早起的年轻人早起的年轻人",
    "早起的年轻人 爱早起早起的年轻人早起的年轻人早起的年轻人",
    "早起的年轻人 爱早起早起的年轻人",
    "早起的年轻人 爱早起",
  ];

  @override
  Widget build(BuildContext context) {
    //脚手架
    return Scaffold(
      appBar: AppBar(
        title: const Text("测试"),
      ),
      body: ListView.builder(
        //数量
        itemCount: _list.length,
        itemBuilder: (BuildContext context, int index) {
          //子Item
          return buildItemWidget(index);
        },
      ),
    );
  }

  ///子Item
  Widget buildItemWidget(int index) {
    //包裹子Widget
    return IntrinsicHeight(
      //左右水平排开
      child: Row(
        //顶部对齐
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //左侧的时间线
          buildLeftWidget(index),
          //右侧的文本
          Expanded(
            child: buildRigetWidget(index),
          ),
        ],
      ),
    );
  }

  ///左侧的时间线
  buildLeftWidget(int index) {
    return Container(
      width: 80,
      child: Column(
        children: [
          Container(
            width:index==0?0: 2,
            height: 10,
            color: Colors.blue,
          ),
          ClipOval(
            child: Container(
              width: 10,
              height: 10,
              color: Colors.blue,
            ),
          ),
          Expanded(
            child: Container(
              width: index==_list.length-1?0:2,
              color: Colors.blue,
            ),
          )
        ],
      ),
    );
  }

  buildRigetWidget(int index) {
    String str = _list[index];
    return Container(
      padding: EdgeInsets.only(left: 10, right: 14, bottom: 22,top: 4),
      child: Text(
        str,
        style: TextStyle(fontSize: 16),
      ),
    );
  }
}
